<template>
  <div>
    <!-- 遮罩层 -->
    <div 
      class="modal-mask" 
      v-show="show" 
      @click="closeOnMaskClick && close()"
    ></div>
    
    <!-- 弹窗内容 -->
     <!-- :style="{ height: height + 'px' }" -->
    <transition name="slide-down">
      <div 
        class="modal-container" 
        v-show="show"
        
      >
        <div class="modal-header">
          <slot name="header">
            <!-- 默认头部内容，可以通过插槽自定义 -->
            <!-- <h3>标题</h3> -->

            <div class="nav">
                <div class="logo">
                    <img class="logo-img" src="https://files.onestep6.com/cloud/cloud_icon.png" />
                    <div class="search" @click="onSearch">
                        <div class="search-content">
                            <van-icon name="search" color="#999999" size="15" />
                            <div class="search-txt">请输入搜索内容</div>
                            <div class="search-btn">搜索</div>
                        </div>
                    </div>
                </div>
            </div>

          </slot>
          <!-- <button class="close-btn" @click="close">×</button> -->
        </div>
        <div class="modal-body">
          <slot>
            <!-- 默认内容，可以通过插槽自定义 -->
            <!-- 这里是弹窗内容 -->
          </slot>
        </div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    show: {
      type: Boolean,
      default: false
    },
    height: {
      type: Number,
      default: 300
    },
    closeOnMaskClick: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    close() {
      this.$emit('update:show', false)
      this.$emit('close')
    },
    onSearch() {

    }
  }
}
</script>

<style lang="less" scoped>
.modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9998;
  transition: opacity 0.3s ease;
}

.modal-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  z-index: 9999;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  overflow: hidden;
  border-radius: 0 0 20px 20px;
}

.modal-header {
  /* padding: 15px;
  border-bottom: 1px solid #eee;
  position: relative; */
}

.modal-header h3 {
  margin: 0;
  font-size: 18px;
}

.close-btn {
  position: absolute;
  right: 15px;
  top: 15px;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  padding: 0 5px;
}

.modal-body {
//   padding: 15px;
  height: calc(100% - 60px);
  overflow-y: auto;
}

/* 动画效果 */
.slide-down-enter-active, .slide-down-leave-active {
  transition: transform 0.3s ease;
}

.slide-down-enter, .slide-down-leave-to {
  transform: translateY(-100%);
}

.nav{
    width: 100%;
    height: 92px;
    background: linear-gradient(96deg, #EAFAED 0%, #DCFADE 100%);
    .logo {
        position: relative;
        z-index: 200;
        display: flex;
        align-items: center;
        // width: 72%;
        height: 88px;
        padding-left: 30px;

        .logo-img {
            flex-shrink: 0;
            display: block;
            width: 139px;
            height: 34px;
            margin-right: 8px;
        }

        .logo-txt {
            padding-top: 10px;
            font-size: 24px;
            line-height: 56px;
            color: #798391;
            font-weight: 400;
        }
    }
    .search {
        display: flex;
        width: 396px;
        height: 65px;
        // padding: 12px 32px;
        margin-left: 22px;
    }

    .search-content {
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        height: 100%;
        background: #FFFFFF;
        border-radius: 64px;
        padding-left: 24px;
        border: 2px solid #49CA6F;
    }

    .search-txt {
        font-size: 24px;
        font-weight: 400;
        color: #798391;
        margin-left: 2px;
    }

    .search-btn {
        position: absolute;
        right: 4px;
        top: 50%;
        transform: translateY(-50%);
        width: 111px;
        height: 56px;
        border-radius: 64px;
        background: #49CA6F;
        font-size: 29px;
        line-height: 56px;
        color: #FFFFFF;
        text-align: center;
    }
}
</style>